<template>
    <van-popup v-model="show" round :close-on-click-overlay="false">
        <div class="wrap">
            <div class="header">
                <img src="@/assets/images/icon_warning.svg" alt="">
            </div>
            <div class="main">
                <div class="title" v-if="c_title">{{c_title}}</div>
                <div class="message" v-if="c_message">{{c_message}}</div>
            </div>
            <div class="footer">
                <van-button class="btn" plain round color="#24C373"
                    v-if="c_showCancelButton" @click="onClose" v-prevent-re-click>{{c_cancelButtonText}}</van-button>
                <van-button class="btn"  round color="#24C373"
                    v-if="c_showConfirmButton" @click="onConfirm" v-prevent-re-click>{{c_confirmButtonText}}</van-button>
            </div>
        </div>
    </van-popup>
</template>

<script>
  import {Popup} from 'vant'
  import {preventReClick} from "../../utils/plugins";

  export default {
    name: "m-dialog",
    components: {
      [Popup.name]: Popup
    },
    props: {
      title: {

      },
      message: {

      },
      showConfirmButton: {
        default: true
      },
      confirmButtonText: {
        default: '确定'
      },
      showCancelButton: {
        default: false
      },
      cancelButtonText: {
      default: '取消'
      },
    },
    computed: {
      c_title(){
        return this.m_title === null ? this.title : this.m_title
      },
      c_message(){
        return this.m_message === null ? this.message : this.m_message
      },
      c_showConfirmButton(){
        return this.m_showConfirmButton === null ? this.showConfirmButton : this.m_showConfirmButton
      },
      c_confirmButtonText(){
        return this.m_confirmButtonText === null ? this.confirmButtonText : this.m_confirmButtonText
      },
      c_showCancelButton(){
        return this.m_showCancelButton === null ? this.showCancelButton : this.m_showCancelButton
      },
      c_cancelButtonText(){
        return this.m_cancelButtonText === null ? this.cancelButtonText : this.m_cancelButtonText
      },
    },
    data(){
      return {
        show: false,
        m_title: null,
        m_message: null,
        m_showConfirmButton: null,
        m_confirmButtonText: null,
        m_showCancelButton: null,
        m_cancelButtonText: null,
      }
    },
    methods: {
      onShow(){
        this.show = true
      },
      onClose(){
        this.show = false;
        this.$emit('close');
      },
      onConfirm(){
        this.show = false;
        this.$emit('confirm');
        },
    }
  }
</script>

<style scoped lang="less">
    .wrap{
        box-sizing: border-box;
        width: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 2px;
        padding: 15px;
    }
    .header{
        padding: 15px 0;
        height: 45px;
        & > img{
            width: 45px;
            height: 100%;
        }
    }
    .main{
        text-align: center;
        .title{
            color: #2E2E2E;
            font-size: 15px;
            font-weight: bold;
            line-height: 24px;
            padding: 5px 0 5px;
        }
        .message{
            color: #B3B3B3;
            font-size: 13px;
            line-height: 17px;
        }
    }
    .footer{
        margin-top: 30px;
        display: flex;
        justify-content: center;
        width: 100%;
        .btn{
            width: 100px;
            height: 32px;
            font-size: 13px;
            & + .btn{
                margin-left: 20px;
            }
        }
    }
</style>
